<!--
 * @Author: liaoxing
 * @Date: 2021-12-16 16:31:34
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-03-01 14:00:42
 * @Description: liaoxing created
 * @FilePath: \pin-xin-admin\src\components\datePicker\datePicker.vue
-->
<template>
  <div class="datePicker flex-align-center">
    <el-select class="dateModelSelect" v-model="currentModel" placeholder="请选择查询模式">
      <el-option
        v-for="item in modelInfo"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <div v-if="currentModel === 0">
      <el-date-picker
        v-model="dateData"
        :type="typeList[0]"
        :format="formatList[0]"
        key="daterange"
        placeholder="请选择"
        range-separator="至"
        :clearable="false"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        >
      </el-date-picker>
    </div>
    
    <div v-if="currentModel === 1">
      <el-date-picker
        v-model="dateData"
        :type="typeList[1]"
        :clearable="false"
        :format="formatList[1]"
        key="week1"
        :picker-options="pickerOptionsEnd"
        placeholder="请选择起始周"
        >
      </el-date-picker>
      <el-date-picker
        style="margin-left: 10px"
        v-model="dateDataEnd"
        :type="typeList[1]"
        :clearable="false"
        key="week2"
        :format="formatList[1]"
        :picker-options="pickerOptionsStart"
        placeholder="请选择结束周"
        >
      </el-date-picker>
    </div>
    
    <div v-if="currentModel === 2">
      <el-date-picker
        v-model="dateData"
        :type="typeList[2]"
        :clearable="false"
        key="month1"
        :format="formatList[2]"
        :picker-options="pickerOptionsEndM"
        placeholder="请选择起始月"
        >
      </el-date-picker>
      <el-date-picker
        style="margin-left: 10px"
        v-model="dateDataEnd"
        :type="typeList[2]"
        :clearable="false"
        :format="formatList[2]"
        key="month2"
        :picker-options="pickerOptionsStartM"
        placeholder="请选择结束月"
        >
      </el-date-picker>
    </div>
    <el-button style="margin-left: 30px" type="primary" @click="searchData">搜索</el-button>
    <el-button @click="reset">重置</el-button>
  </div>
</template>

<script>
import timeTrans from '@/utils/timeTrans'
export default {
  name: "datePicker",
  data () {
    return {
      dateData: null,
      dateDataEnd: null,
      typeList: ["daterange", "week", "month"],
      formatList: ["yyyy-MM-dd", "yyyy-WW", "yyyy-MM"],
      modelList: ['date', 'week', 'month'],
      currentModel: 0,
      modelInfo: [
        {
          label: "日",
          value: 0
        },
        {
          label: "周",
          value: 1,
        },
        { 
          label: "月",
          value: 2
        }
      ],
      pickerOptionsStart: {
        disabledDate:(time) =>{
          if (!this.dateData) return false
          return time.getTime() <  this.dateData.getTime() - 24 * 60 * 60 * 1000
        }
      },
      pickerOptionsEnd: {
        disabledDate:(time) =>{
          if (!this.dateDataEnd) return false
          return time.getTime() >  this.dateDataEnd.getTime() + 24 * 60 * 60 * 1000 * 5
        }
      },
      pickerOptionsStartM: {
        disabledDate:(time) =>{
          if (!this.dateData) return false
          return time.getTime() <  this.dateData.getTime()
        }
      },
      pickerOptionsEndM: {
        disabledDate:(time) =>{
          if (!this.dateDataEnd) return false
          return time.getTime() >  this.dateDataEnd.getTime()
        }
      },
    }
  },
  watch: {
    currentModel () {
      this.dateData = null
      this.dateDataEnd = null
    }
  },
  created () {
    let temp = [new Date(new Date().getFullYear() + '/' + (new Date().getMonth() + 1) + '/1'), new Date(new Date().getTime() - 24 * 60 * 60 * 1000)]
    if (new Date().getTime() - 24 * 60 * 60 * 1000 < temp[0].getTime()) {
      temp[1] = temp[0]
    }
    this.dateData = temp
  },
  methods: {
    searchData () {
      let params = {
        start: null,
        field: this.modelList[this.currentModel],
        end: null
      }
      switch (this.currentModel) {
        case 0:
          params.start = timeTrans.getYMD(this.dateData[0])
          params.end = timeTrans.getYMD(this.dateData[1])
          break;
        case 1:
          params.start = timeTrans.getYW(this.dateData)
          params.end = timeTrans.getYW(this.dateDataEnd)
          break;
        case 2:
          params.start = timeTrans.getYM(this.dateData)
          params.end = timeTrans.getYM(this.dateDataEnd)
          break;
      }
      this.$emit('queryFinanceReport', params)
    },
    reset () {
      this.currentModel = 0
      this.$nextTick(() => {
        this.dateData = [new Date(new Date().getFullYear() + '/' + (new Date().getMonth() + 1) + '/1'), new Date()]
      })
      this.$emit('queryFinanceReport', false)
    }
  }
}
</script>

<style lang="less" scoped>

.datePicker{
  justify-content: end;
  height: 60px;
  width: 100%;
  padding: 0 10px;
  position: relative;
  .dateModelSelect{
    width: 80px;
    margin-right: 10px;
  }
}

</style>